table.controller{border-collapse: collapse;padding:0px;font-family:'Open Sans';font-size:14px;font: 14px/24px 'Roboto', sans-serif;}
table.controller .control{font:14px 'Open Sans';}
table.controller td{padding:0px;border:0px solid red;}

/*Update the height of the line per your needs*/
table.controller .line{position:relative;height:24px;width:15px;float:left;}
table.controller .line .vert{width:1px; height:100%;}
table.controller .line .horz{position:absolute;top:50%;width:10px;height:1px;}

/*Change the colors to match your color scheme*/
table.controller .line.level1 .vert {background-color:#FF2A02;}
table.controller .line.level1 .horz {background-color:#FF2A02;}
table.controller .line.level2 .vert{background-color:#2BC6CC;} 
table.controller .line.level2 .horz{background-color:#2BC6CC;}
table.controller .line.level3 .vert{background-color:#098EE7;}
table.controller .line.level3 .horz{background-color:#098EE7;}

table.controller tr.hidden{display:none;}

table.controller .expander{margin-right:10px;}

table.controller .l1 .control{width:10px;min-height:100%}
table.controller .l2 .control{width:30px;min-height:100%}
table.controller .l3 .control{width:60px;min-height:100%}
table.controller .l4 .control{width:90px;min-height:100%}

table.controller .l1.contracted .control .line.level1{display:none;}
table.controller .l2.contracted .control .line.level2{display:none;}
table.controller .l3.contracted .control .line.level3{display:none;}

/*table.controller .l4 .expander{display:none;}*/

table.controller .label {margin-right:30px;}
table.controller td.data {text-align:center;min-width:90px;}

table.controller .control, table.controller .expander, table.controller .label{float:left;}
table.controller .contracted .expander {width:10px;height:20px;background-position:0px 5px; background-repeat:no-repeat;background-size:10px 10px;background-image:url();}
table.controller .expanded .expander {width:10px;height:20px;background-position:0px 5px; background-repeat:no-repeat;background-size:10px 10px;background-image:url();}
table.controller .childless .expander {display:none;}

table.controller .control .line.level1 .horz{display:none;}
table.controller .l1-first .control .line.level1 .horz{display:block;}
table.controller .l1-last .control .line.level1 .horz{display:block;width:10px; height:1px;}
table.controller .l1-first .control .line.level1 .vert{bottom:0px;position:absolute;width:1px; height:50%;}
table.controller .l1-last .control .line.level1 .vert{width:1px; height:50%;}
table.controller .l1-last .control .line.level1 .horz{}

table.controller .control .line.level2 .horz{display:none;}
table.controller .l2-first .control .line.level2 .horz{display:block;}
table.controller .l2-last .control .line.level2 .horz{display:block;width:10px; height:1px;}
table.controller .l2-first .control .line.level2 .vert{bottom:0px;position:absolute;width:1px; height:50%;}
table.controller .l2-last .control .line.level2 .vert{width:1px; height:50%;}

table.controller .control .line.level3 .horz{display:none;}
table.controller .l3-first .control .line.level3 .horz{display:block;}
table.controller .l3-last .control .line.level3 .horz{display:block;width:10px; height:1px;}
table.controller .l3-first .control .line.level3 .vert{bottom:0px;position:absolute;width:1px; height:50%;}
table.controller .l3-last .control .line.level3 .vert{width:1px; height:50%;}
